<template>
    <el-table :data="data" highlight-current-row border style="width: 100%">
        <el-table-column type="selection" width="50" align="center"> </el-table-column>
        <el-table-column label="序号" type="index" width="80" align="center"> </el-table-column>
        <el-table-column v-for="item in formDefinition" :key="item.name" :prop="item.name" :label="item.title"
            :width="item.width" align="center">
            <template slot-scope="props">
                <el-image v-if="item.name === 'companyLicense'" style="width: 180px; height: 80px" :src="props.row[item.name]">
                </el-image>
                <span v-else>{{ props.row[item.name] }}</span>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="220">
            <template slot-scope="scope">
                <el-button @click.native.prevent="deleteRow(scope.row)" type="text" size="small">
                    移除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</template>
  
<script>
export default {
    props: {
        //渲染组件使用的数据集
        data: {
            type: Array,
            required: false,
        },
        /**
         * 数据表格式定义
         * title: 数据表格的标题
         * name:  后端返回要渲染的字段名称
         * width: 当前数据占用列的宽度
         */
        formDefinition: {
            type: Array,
            required: true,
            default: [{ title: "标题", name: "field", width: "180" }]
        },
    },
    methods: {
        deleteRow(scope) {
            console.log(scope);
        },
    },
};
</script>
  
<style scoped lang="scss">
.el-table {
    margin-top: 18px;
    height: 70vh;
}
</style>
  